<template>
  <AppPage :show-footer="true">
    <div flex-1>
      <n-card rounded-10>
        <div flex items-center>
          <img rounded-full width="60" :src="userStore.avatar"/>
          <div ml-20>
            <p text-16>Hello, {{ userStore.name }}</p>
            <p mt-5 text-12 op-60>今天又是元气满满的一天</p>
          </div>

        </div>
      </n-card>

      <n-card title="项目" size="small" :segmented="true" mt-15 rounded-10>
        <n-grid x-gap="12" :cols="3">
          <n-gi>
            <n-descriptions label-placement="top" title="Yqm-admin-vue 后端管理">
              <n-descriptions-item>
                目前有很多管理系统，代码都封装的很厉害或者封装的很深，难以看懂！特别给新手造成困扰。
                就算看懂，也要花大量的时间。
                所以利用空余时间，写了一套自己的后台管理框架
              </n-descriptions-item>
            </n-descriptions>
          </n-gi>

          <n-gi>
            <n-descriptions label-placement="top" title="技术">
              <n-descriptions-item>
                <n-space vertical>
                  <div>
                    基础框架：spring boot
                  </div>
                  <div>
                    权限：sa-token
                  </div>
                  <div>
                    存储：mysql
                  </div>
                  <div>
                    前端：vue3
                  </div>
                  <div>
                    状态管理：Pinia (类似于 vuex)
                  </div>
                  <div>
                    UI库：naive ui
                  </div>
                </n-space>
              </n-descriptions-item>
            </n-descriptions>
          </n-gi>
          <n-gi>
            <n-descriptions label-placement="top" title="聊天群">
              <n-descriptions-item>
                <n-space vertical>
                  <div>
                    QQ群1：255531425
                  </div>
                </n-space>
              </n-descriptions-item>
            </n-descriptions>
          </n-gi>
        </n-grid>
      </n-card>

    </div>
  </AppPage>
</template>

<script setup>
import {useUserStore} from '@/store'

const userStore = useUserStore()
</script>
